<template>
	<view class="container">
		<view class="details">
			<view class="title">维修信息</view>
			<view class="info">
				<view class="common">维修单号：</view>
				<view class="general">3535252</view>
			</view>
			<view class="info">
				<view class="common">车主姓名：</view>
				<view class="general">张三</view>
			</view>
			<view class="info">
				<view class="common">联系方式：</view>
				<view class="phone">1993829282</view>
				<image src="@/static/phone.png"></image>
			</view>
			<view class="info">
				<view class="common">维修方式：</view>
				<view class="general"> {{ isPickup ? '上门取车' : '上门取车/到店维修' }}</view>
			</view>
			<view class="info">
				<view class="common">取车位置：</view>
				<view class="address">山阳区32号</view>
				<image src="@/static/loc.png"></image>
			</view>

			<view class="info">
				<view class="common">预约日期：</view>
				<view class="general">2022/11/10 11:00</view>
			</view>
			<view class="info">
				<view class="common">提交日期：</view>
				<view class="general">2022/11/10 11:00</view>
			</view>
		</view>
		<view class="center">
			<view class="title">车辆信息</view>
			<view class="info">
				<view class="common">车辆类型：</view>
				<view class="general">大客车</view>
			</view>
			<view class="info">
				<view class="common">车牌号：</view>
				<view class="general">豫J45323</view>
			</view>
			<view class="info">
				<view class="common">整车照片：</view>
			</view>
			<view class="photo">
				<!-- <uni-file-picker limit="1"></uni-file-picker> -->
				<image src="/static/okGBXAsAiBRAIFiQzPbAa22fUw0YBpZMmEgvLo.jfif"></image>
			</view>
			<view class="info">
				<view class="common">维修部位照片：</view>
			</view>
			<view class="photo">
				<!-- <uni-file-picker limit="3" file-mediatype="image" mode="grid" file-extname="png,jpg"/> -->
				<image src="/static/6d56e302ceba79c4f80b3a01293ddee0.jfif"></image>
				<image src="/static/6d56e302ceba79c4f80b3a01293ddee0.jfif"></image>
				<image src="/static/6d56e302ceba79c4f80b3a01293ddee0.jfif"></image>
			</view>
		</view>
		<!-- 确认到场 -->
		<view class="bottom">
			<!-- <button v-if="!isVerified" class="button" @click="toggle"
				:style="{ backgroundColor: isVerified ? 'rgba(154,154,154,1)' : 'rgba(13,122,247,1)'}"><text>{{ isVerified ? '已到场' : '确认到场' }}
				</text></button>
				<view v-if="isVerified" class="button-disabled" @click="back">
					<text class="button-text">已到场</text>
				</view>
			<yfx-tooltip ref="tooltip"></yfx-tooltip> -->
			<button class="button" v-show="info" @click="toggle" v-if="isVerified == 0">确认到场</button>
			<button class="button-disabled" v-show="info" @click="back" v-if="isVerified == 1">已到场</button>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				isVerified: 0,
				isPickup: false,
				info: true
			}
		},
		methods: {
			//显示弹窗
			toggle() {
				uni.showModal({
					title: '核销此订单',
					content: '请您仔细核对订单，此操作不可撤销，请谨慎操作',
					confirmText: '到场',
					success: (res) => {
						if (res.confirm) {
							console.log("点击确认按钮触发");
							this.isVerified = 1; // 更新状态  
							this.isPickup = true;//更新维修状态
						} else if (res.cancel) {
							console.log("点击取消按钮触发");
						}
					}
				});
			},
			back() {
				uni.navigateBack()
			}

		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.details {
		margin: 20rpx;
		height: 510rpx;
	}

	.center {
		margin: 20rpx;
		height: 720rpx;
	}

	.title {
		font-size: 30rpx;
		font-weight: bold;
	}

	.info {
		margin-top: 20rpx;
		font-size: 28rpx;
		display: flex;
	}

	.info image {
		width: 40rpx;
		height: 40rpx;
		margin-left: 150rpx;
	}

	.common {
		width: 240rpx;
	}

	.general {
		width: 450rpx;
	}

	.phone {
		font-size: 28rpx;
	}

	.address {
		font-size: 28rpx;
	}

	.photo {
		margin: 20rpx 0;
		display: flex;
	}

	.photo image {
		width: 200rpx;
		height: 180rpx;
		margin: 0 15rpx;
	}

	.bottom {
		height: 200rpx;
	}

	.button {
		width: 524rpx;
		height: 80rpx;
		border-radius: 8rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: rgba(13, 122, 247, 1);
		color: rgba(255, 255, 255, 1);
		margin-top: 120rpx;
	}
	.button-disabled {
		width: 524rpx;
		height: 80rpx;
		font-size: 36rpx;
		border-radius: 8rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: rgba(154, 154, 154, 1);
		/* 灰色背景表示禁用 */
		color: rgba(255, 255, 255, 1);
		/* 文本颜色变浅 */
		margin-top: 150rpx;
		margin-left: 110rpx;
	}
</style>